<extend name="Public/common"/>
<block name="othercss">
    <style type="text/css">
        body{
            background: #f5f5f5;
        }
        .payitem{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 11px;
            font-size: 13px;
            height: 64px;
            background: #FFF;
        }

        .text-title{
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 163px;
        }

        .div_col{
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            margin-right: 17px;
        }

        .div_style{
            display: flex;
            flex-direction: row;
        }
    </style>
</block>
<block name="header">
    <div class="header">
        <div class="clearfix box">
            <a class="return" href="javascript:history.back(-1)"><i class="return-icon"></i></a>
            <h2>支付方式</h2>
        </div>
    </div>
</block>
<block name="body">
    <div class="container" style="padding-bottom: 0">
        <div  class="text-title">
            <div style="text-align: center;">
                订单编号:{$invitation}
            </div>
            <div style="font-size: 14px;text-align: center;">订单金额:&nbsp;<span class="price" style="color: #e83546;font-size: 25px;font-weight: bold">{$ex_register}</span></div>
        </div>

        <div class="payitem" style="line-height:64px;">
            <div>收款方:</div>
            <div>{$platform}</div>
        </div>

        <div style="padding-top: 20px;">

            <!-- 微信支付 -->
            <div class="payitem" onclick="payclick(1)">
                <div class="div_style">
                    <div class="div_col">
                        <image  style="width:33px;height:33px;" src="__PUBLIC__/phone/images/wx.png"></image>
                    </div>
                    <div class="div_col">
                        <p style="text-align: left;line-height:20px;">微信支付</p>
                        <p>推荐已安装微信的用户使用</p>
                    </div>
                </div>
                <div class="div_col">
                    <img  id="r1" src="__PUBLIC__/phone/images/yuan-on.png" width="20">
                </div>
            </div>

            <div style="padding: 0 11px;background:#FFF;">
                <div style="border-bottom:1px solid rgb(229,229,229);"></div>
            </div>
        </div>

        <if condition="!$status">
            <!-- 支付宝支付 -->
            <div class="payitem" onclick="payclick(2)">
                <div class="div_style">
                    <div class="div_col">
                        <image  style="width:33px;height:33px;" src="__PUBLIC__/phone/images/zfb.png"></image>
                    </div>
                    <div class="div_col">
                        <p style="text-align: left;line-height:20px;">支付宝支付</p>
                        <p>推荐已安装支付宝的用户使用</p>
                    </div>
                </div>
                <div class="div_col">
                    <img id="r2" src="__PUBLIC__/phone/images/yuan-off.png" width="20">
                </div>
            </div>
        </if>
    </div>
    <div style="padding: 10px 25px">
        <a  style="background: rgb(209,0,21);width: 100%;line-height: 44px;border-radius: 5px;text-align: center;color: #FFF;margin-top: 25px;font-size: 16px;" onClick="goweixin()" >立即支付</a>
    </div>
    </div>
</block>
<block name="footer"></block>
<block name="otherjs">
    <script>
        var type = 1;
        function payclick(intf){
            var off = "__PUBLIC__/phone/images/yuan-off.png";
            var on = "__PUBLIC__/phone/images/yuan-on.png";
            if(intf==1){
                if(intf == type){
                    return;
                }
                var  img =  document.getElementById('r1');
                img.setAttribute("src",on);
                img = document.getElementById('r2');
                img.setAttribute("src",off);
                type =1;
            }
            if(intf==2){
                var  img =  document.getElementById('r2');
                if(intf == type){
                    return;
                }
                img.setAttribute("src",on);
                img = document.getElementById('r1');
                img.setAttribute("src",off);
                type = 2;
            }
        }
        function goweixin() {
            window.location.href = '/Phone/Extension/pay?status='+type +'&invitation='+"{$invitation}";
        }
        setInterval(function () {
            $.get('/Phone/Extension/checkPay',function (e) {
                if (e != 0) {
                    window.location.href = '/Phone/Extension/pullCoupon'
                }
            });
        }, 1000);
    </script>
</block>

